<template>
  <el-collapse class="bookmarks-tab">
    <el-collapse-item v-for="item in ItemsGroup" :key="item.id">
      <template slot="title">
        {{ item.title }}<i class="header-icon el-icon-info"></i>
      </template>
      <div :style="ItemStyle">
        <bookmarks-item v-for="bmItem in item.children" :dataItem="bmItem" :key="bmItem.id" :gutter="15" @openPage="openPage($event)"></bookmarks-item>
      </div>
    </el-collapse-item>
  </el-collapse>
</template>
<script>
import BookmarksItem from '@/components/Bookmarks/BookmarksItem'

export default {
  name: 'LSBookmarksTab',
  components: {BookmarksItem},
  props: {
    ItemsGroup: {
      type: Array,
      default: () => []
    },
    Layout: {
      type: String,
      default: 'horizontal'
    }
  },
  data() {
    return {

    }
  },
  computed: {
    ItemStyle() {
      return {
        'margin-top': '10px',
        'display': 'flex',
        'flex-wrap': 'wrap',
        'flex-direction': this.Layout === 'horizontal' ? 'row' : 'column'
      }
    }
  },
  mounted() {
    // console.log('************ BookmarksTab mounted itemsGroup ', this.ItemsGroup)
  },
  updated() {
    // console.log('************ BookmarksTab updated itemsGroup ', this.ItemsGroup)
  },
  methods: {
    openPage(itemData){
      this.$emit('openPage', itemData);
    }
  }
}
</script>
<style scoped>
.el-collapse{
  border-top: 0px;
  border-bottom: 0px;
}

.el-collapse-item {
  margin-bottom: 10px;
}

.bookmarks-tab /deep/ .el-collapse-item__header{
  font-size: 14px;
  border-bottom: 0px;
  padding:0px 10px;
  background-color: #eee;
}
.bookmarks-tab /deep/ .el-collapse-item__wrap{
  border-bottom: 0px;
}
</style>